<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 1. 字符编码元数据：指定页面使用UTF-8编码，支持所有中文及特殊符号，避免乱码 -->
    <meta charset="UTF-8">
    
    <!-- 2. 视口元数据（移动端适配基础）：控制移动设备显示比例，width=device-width让页面宽度匹配设备屏幕，initial-scale=1.0禁止初始缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    
    <!-- 3. 关键词元数据：用于搜索引擎优化（SEO），告知搜索引擎页面核心内容，提升“计算机学院”“人工智能专业”等关键词的搜索权重 -->
    <meta name="keywords" content="计算机与信息工程学院, 二级学院, 人工智能专业, 计算机科学与技术, 软件工程, 学院官网">
    
    <!-- 4. 描述元数据：搜索引擎搜索结果中显示的“页面简介”，吸引用户点击，需简洁概括页面核心内容 -->
    <meta name="description" content="计算机与信息工程学院是学校重点建设的二级学院，开设计算机科学与技术、人工智能、软件工程等专业，致力于培养信息技术领域高素质人才。">
    
    <!-- 5. 作者元数据：标注页面创作者/维护者，便于团队协作和责任追溯 -->
    <meta name="author" content="计算机与信息工程学院 网络中心">
    
    <!-- 6. 网页标题（元数据的重要组成）：显示在浏览器标签栏，同时是SEO核心要素，需包含“二级学院名称”和“核心定位” -->
    <title>计算机与信息工程学院 - 首页</title>
    
    <!-- 7. 刷新元数据（可选，用于页面自动跳转）：设置3秒后自动跳转到学院“师资队伍”页面（实际场景需谨慎使用，避免影响用户体验） -->
    <meta http-equiv="refresh" content="3; url=#teacher-section">
</head>
<body>
    <!-- 页面内容：简单呈现学院核心信息，验证元数据生效（元数据不直接显示在页面，但影响浏览器/搜索引擎行为） -->
    <div style="max-width: 1200px; margin: 0 auto; padding: 20px;">
        <h1 style="color: #2c3e50; text-align: center;">计算机与信息工程学院</h1>
        <p style="text-align: center; font-size: 18px; margin-top: 20px;">
            欢迎访问学院官网！本页面已配置完整HTML元数据，包含字符编码、SEO关键词、移动端视口等设置。<br>
            3秒后将自动跳转到“师资队伍”板块（由&lt;meta http-equiv="refresh"&gt;控制）...
        </p>
        
        <!-- 锚点：对应自动跳转的目标位置 -->
        <section id="teacher-section" style="margin-top: 50px;">
            <h2 style="color: #3498db;">师资队伍（跳转目标）</h2>
            <p>学院现有教职工86人，其中教授12人、副教授28人，博士学历教师占比65%，拥有省级教学团队2个、省级优秀教师3人...</p>
        </section>
    </div>
</body>
</html>